<template>
  <div>
    <header class="header">
      <div class="logo">比价宝</div>
      <nav class="nav">
        <ul>
         
          <li><router-link to="/Login" class="btn">登录</router-link></li>
        </ul>
      </nav>
    </header>
    <section class="hero">
      <div class="hero-content">
        <h1>比价宝</h1>
        <p>找到最佳优惠，尽在比价宝</p>
        <div class="hero-links">
          <router-link to="/user" class="hero-btn">
            <img src="/4551821.png" alt="用户中心" class="icon" />
            <div class="hero-text">用户中心</div>
          </router-link>
          <router-link to="/webdate" class="hero-btn">
            <img src="/4551617.png" alt="图表信息" class="icon" />
            <div class="hero-text">销售统计</div>
          </router-link>
          <router-link to="/search" class="hero-btn">
            <img src="/4551835.png" alt="立即搜索" class="icon" />
            <div class="hero-text">全部商品</div>
          </router-link>
          <router-link to="/compare" class="hero-btn">
            <img src="/4551724.png" alt="开始比价" class="icon" />
            <div class="hero-text">开始比价</div>
          </router-link>
          <router-link to="/compare" class="hero-btn">
            <img src="/4551841.png" alt="我的收藏" class="icon" />
            <div class="hero-text">我的收藏</div>
          </router-link>
          
        </div>
      </div>
    </section>
    <section class="features">
      <div class="feature">
        <h1>随便逛逛</h1>
      </div>
    </section>
    <div v-if="loading" class="loading">加载中...</div>
    <div v-if="error" class="error">{{ error }}</div>
    <div v-if="!loading && !error" class="categories">
      <div class="card2">
      <div v-for="(categoryProducts, categoryName) in displayedProducts" :key="categoryName" class="category">
        <h3>{{ categoryName }}</h3>
        <div class="product-display">
          <button @click="prevProduct(categoryName)">←</button>
          <div class="product-card" v-for="product in categoryProducts" :key="product.productId">
            <a :href="product.productLink" target="_blank">
              <img :src="product.imageUrl" alt="Product Image" class="product-image"/>
              <div class="product-details">
                <h3>{{ product.productName }}</h3>

              </div>
            </a>
          </div>
          <button @click="nextProduct(categoryName)">→</button>
        </div>
      </div>
      </div>
    </div>
    <div v-else class="no-products">没有产品显示。</div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
     username:'',
      
      categorizedProducts: {
        '鞋子': [],
        '服饰': [],
        '科技': []
      },
      currentIndex: {
        '鞋子': 0,
        '服饰': 0,
        '科技': 0
      },
      numItemsToShow: 5,
      loading: false,
      error: null
    };
  },
  mounted() {
    this.fetchProducts();
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
    this.username = localStorage.getItem("username");
    console.log(this.username)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
  },
  computed: {
    displayedProducts() {
      let displayed = {};
      for (const [category, products] of Object.entries(this.categorizedProducts)) {
        displayed[category] = products.slice(this.currentIndex[category], this.currentIndex[category] + this.numItemsToShow).filter(product => product.imageUrl);
      }
      return displayed;
    }
  },
  methods: {
    fetchProducts() {
      this.loading = true;
      this.error = null;
      const categories = {
        1: '鞋子',
        2: '服饰',
        3: '科技'
      };
      const promises = Object.keys(categories).map(categoryId =>
        axios.get(`http://localhost:8080/api/showdata/hot-products?categoryId=${categoryId}&limit=50`)
          .then(response => {
            console.log('Data for', categories[categoryId], ':', response.data);
            this.categorizedProducts[categories[categoryId]] = response.data.sort(() => Math.random() - 0.5).map(product => ({
              productId: product.id,
              productName: product.name,
              productLink: product.productLink,
              price: product.price,
              imageUrl: product.imageUrl
            }));
          })
          .catch(error => {
            console.error('Error fetching products for category', categories[categoryId], error);
            this.error = '加载商品失败';
          })
      );
      Promise.all(promises).then(() => {
        this.loading = false;
      });
    },
    prevProduct(category) {
      if (this.currentIndex[category] > 0) {
        this.currentIndex[category] -= 1;
      }
    },
    nextProduct(category) {
      if (this.currentIndex[category] < this.categorizedProducts[category].length - this.numItemsToShow) {
        this.currentIndex[category] += 1;
      }
    },
    handleResize() {
      const width = window.innerWidth;
      if (width < 768) {
        this.numItemsToShow = 1;
      } else if (width < 1024) {
        this.numItemsToShow = 2;
      } else {
        this.numItemsToShow = 3;
      }
    }
  }
};
</script>
<style scoped>
.hero-content {
  text-align: center;
}

.hero-btn {
  display: inline-block;
  margin: 20px;
  padding: 10px;
  background-color: #f8f9fa;
  color: #333;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
  text-align: center;
}

.hero-btn:hover {
  background-color: #e0e0e0;
}

.hero-text {
  font-size: 22px;
  color: #333;
  margin-top: 10px;
}

.icon {
  width: 100px;
  height: 100px;
  display: block;
  margin: 0 auto;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #333;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: white; /* 设置为白色 */
}

.nav ul {
  list-style: none;
  display: flex;
}

.nav li {
  margin-left: 20px;
}

.btn {
  padding: 10px 20px;
  text-decoration: none;
  color: #007bff;
  border-radius: 5px;
  border: 1px solid transparent;
  transition: background-color 0.3s, border-color 0.3s;
}

.btn:hover {
  background-color: #0056b3;
  border-color: #004080;
}

.hero {
  background-color: #f8f9fa;
  padding: 50px 20px;
  text-align: center;
}

.hero-content h1 {
  font-size: 36px;
  color: #333;
}

.hero-content p {
  font-size: 18px;
  color: #666;
}

.features {
  padding: 20px;
  background-color: #fff;
}

.feature {
  text-align: center;
}

.product-display {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
  align-items: center;
}

.product-card {
  flex: 0 0 calc(100% / var(--num-items-to-show) - 20px);
  transition: transform 0.3s ease-in-out;
  box-sizing: border-box;
  margin: 10px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  text-align: center;
}

.category {
  --num-items-to-show: 5;
}

.product-details h3 {
  margin: 10px 0;
  color: #333;
  font-size: 18px;
}

.product-details p {
  margin: 5px 0;
  color: #666;
  font-size: 16px;
}

.loading, .error, .no-products {
  text-align: center;
  font-size: 20px;
  color: #666;
}

.buttons {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

.buttons .btn {
  padding: 10px 20px;
  margin: 0 15px;
  font-size: 16px;
  color: white;
  background: linear-gradient(to right, #6db3f2, #1e90ff);
  border: 1px solid #1e90ff;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

.buttons .btn:hover {
  background: linear-gradient(to right, #1e90ff, #4682b4);
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.2);
}

.product-image {
  width: 250px;
  height: auto;
  display: block;
  margin: auto;
}
.card2 {
  padding-left: 200px; /* 左边内边距 */
  padding-right: 200px;
}
</style>
